<template>
	<view class="container">
		<view class="head">
			<!-- <image src="../../static/img/user-bg.png" class="full" mode=""></image> -->
			<view class="userBox flex-ac">
				<image src="../../static/img/tx.png" class="tx" mode=""></image>
				<view style="flex: 1;">
					<view class="flex-ac">{{userName}}</view>
					<!-- <view class="status">13512345678</view> -->
				</view>
			</view>
		</view>
		<view class="body">
			<view class="card flex-wrap">
				<view class="itemBox flexmid-col" @click="$Jump.Open('./driverList/driverList')">
					<image src="../../static/img/driver.png" mode="aspectFit"></image>
					<view class="text">司机列表</view>
					<view class="label" v-if="noRead > 0">{{noRead}}</view>
				</view>
				<view class="itemBox flexmid-col" @click="$Jump.Open('./carList/carList')">
					<image src="../../static/img/car.png" mode="aspectFill"></image>
					<view class="text">车辆列表</view>
				</view>
				<view class="itemBox flexmid-col" @click="$Jump.Open('./carListNone/carListNone')">
					<image src="../../static/img/kongche.png" mode=""></image>
					<view class="text">空闲预警车辆</view>
				</view>
				<view class="itemBox flexmid-col" @click.stop="$Jump.Open('./Rest/Rest')">
					<image src="../../static/img/xiuxi.png" mode=""></image>
					<view class="text">调休管理</view>
				</view>
				<view class="itemBox flexmid-col" @click="$Jump.Open('./oil/oil')">
					<image src="../../static/img/jiayou.png" mode=""></image>
					<view class="text">加油管理</view>
				</view>
				<view class="itemBox flexmid-col" @click="$Jump.Open('./repair/repair')">
					<image src="../../static/img/weixiu.png" mode=""></image>
					<view class="text">车辆维修</view>
					<!-- <view class="label">8</view> -->
				</view>
				<view class="itemBox flexmid-col" @click="$Jump.Open('./accident/accident')">
					<image src="../../static/img/shigu.png" mode=""></image>
					<view class="text">事故记录</view>
					<!-- <view class="label">99+</view> -->
				</view>
				<view class="itemBox flexmid-col" @click="$Jump.Open('./setting/setting')">
					<image src="../../static/img/sz.png" mode=""></image>
					<view class="text">设置</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				userName: '',
				noRead: 0,
				customerTelephone: '', //客服电话
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.userName = uni.getStorageSync('userName')
		},
		onPullDownRefresh() {
			this.getUserInfo()
		},
		methods: {
			// 查看个人资料
			lookDetail(){
				if(this.user.consignorType === 'company'){
					this.$Jump.Open('/pages/login/registerQy/registerQy?type=2')
				}else{
					this.$Jump.Open('/pages/login/registerGr/registerGr?type=2')
				}
			},
			// 获取用户信息
			getUserInfo(){
				this.$Net.get('/consignorApi/consignor/detail').then(res=>{
					console.log('承运人信息：', res)
					this.user = res.data
					setTimeout(()=>{
						uni.stopPullDownRefresh()
					},500)
				})
			},
			
		}
	}
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style lang="scss">
	.body{
		width: 100%;
		padding: 20rpx;
		background-color: #f7f7f7;
		.card{
			width: 100%;
			border-radius: 8rpx;
			background-color: #fff;
			padding: 10rpx 0;
		}
		.itemBox{
			width: 172rpx;
			position: relative;
			padding: 20rpx 0;
			.label{
				padding: 0 8rpx;
				height: 30rpx;
				font-size: 22rpx;
				line-height: 28rpx;
				color: #fff;
				background-color: #FF372C;
				border-radius: 16rpx;
				position: absolute;
				top: 12rpx;
				right: 30rpx;
			}
			image{
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
			}
			.text {
				font-size: 26rpx;
				color: #333;
				
			}
		}
	}
	.head{
		width: 100%;
		height: 380rpx;
		background-color: #fff;
		position: relative;
		.userBox{
			width: 100%;
			height: 110rpx;
			position: absolute;
			bottom: 62rpx;
			padding: 0 30rpx;
			.tx{
				width: 110rpx;
				height: 110rpx;
				margin-right: 20rpx;
			}
			.name{
				font-size: 40rpx;
				color: #3F4151;
				font-weight: bold;
				margin-right: 10rpx;
			}
			.label{
				width: 70rpx;
				height: 36rpx;
			}
			.status{
				text-align: left;
				margin-top: 16rpx;
				// width: 80rpx;
				width: 100%;
				height: 40rpx;
				// background: rgba(0, 132, 255, .2);
				border-radius: 4rpx;
				font-size: 26rpx;
				// color: #3DB020;
			}
			.lookMore{
				font-size: 26rpx;
				color: #777C99;
			}
		}
	}
</style>
